<template>
  <div class="participated-activities">
    <van-nav-bar title="我参与的活动" left-arrow @click-left="router.back()" fixed :border="false" class="custom-nav" />

    <div class="content">
      <van-tabs v-model:active="activeTab" animated swipeable color="#8a2be2" title-active-color="#8a2be2"
        title-inactive-color="#666" line-width="20px" line-height="3px" background="#fff" sticky offset-top="46">
        <van-tab title="全部">
          <div class="tab-content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
              <activity-list :activities="activities" :loading="loading" @activity-click="goToDetail" />
              <van-empty v-if="!loading && activities.length === 0" description="暂无参与的活动" image="search" />
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab title="进行中">
          <div class="tab-content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
              <activity-list :activities="ongoingActivities" :loading="loading" @activity-click="goToDetail" />
              <van-empty v-if="!loading && ongoingActivities.length === 0" description="暂无进行中的活动" image="search" />
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab title="已结束">
          <div class="tab-content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
              <activity-list :activities="finishedActivities" :loading="loading" @activity-click="goToDetail" />
              <van-empty v-if="!loading && finishedActivities.length === 0" description="暂无已结束的活动" image="search" />
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { activityApi } from '@/api/activity';
import ActivityList from '@/components/activity/ActivityList.vue';

const router = useRouter();
const activities = ref([
  {
    id: 1,
    title: '西湖环湖骑行',
    location: '杭州市西湖区',
    startTime: new Date(Date.now() + 24 * 60 * 60 * 1000), // 明天
    endTime: new Date(Date.now() + 30 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 8,
    maxParticipants: 20,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'EASY'
  },
  {
    id: 2,
    title: '千岛湖骑行',
    location: '杭州市淳安县',
    startTime: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3天后
    endTime: new Date(Date.now() + 4 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 5,
    maxParticipants: 15,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'MEDIUM'
  },
  {
    id: 3,
    title: '钱塘江骑行',
    location: '杭州市江干区',
    startTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2天前
    endTime: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 12,
    maxParticipants: 20,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'MEDIUM'
  },
  {
    id: 4,
    title: '富春江骑行',
    location: '杭州市富阳区',
    startTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7天后
    endTime: new Date(Date.now() + 8 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 3,
    maxParticipants: 10,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'HARD'
  },
  {
    id: 5,
    title: '莫干山骑行',
    location: '湖州市德清县',
    startTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), // 5天前
    endTime: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 15,
    maxParticipants: 25,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'HARD'
  }
]);
const activeTab = ref(0);
const loading = ref(false);
const refreshing = ref(false);

// 根据活动状态过滤
const ongoingActivities = computed(() => {
  return activities.value.filter(activity => {
    const now = new Date();
    const endTime = new Date(activity.endTime);
    return endTime > now;
  });
});

const finishedActivities = computed(() => {
  return activities.value.filter(activity => {
    const now = new Date();
    const endTime = new Date(activity.endTime);
    return endTime <= now;
  });
});

// 获取活动列表
const fetchActivities = async () => {
  loading.value = true;
  try {
    const response = await activityApi.getUserParticipatedActivities();
    if (response && response.data && response.data.list) {
      activities.value = response.data.list;
    } else {
      activities.value = [];
    }
  } catch (error) {
    console.error('获取活动列表失败:', error);
    showToast('获取活动列表失败');
  } finally {
    loading.value = false;
  }
};

// 下拉刷新
const onRefresh = async () => {
  try {
    await fetchActivities();
    showToast('刷新成功');
  } catch (error) {
    console.error('刷新失败:', error);
    showToast('刷新失败');
  } finally {
    refreshing.value = false;
  }
};

onMounted(() => {
  fetchActivities();
});

const goToDetail = (id) => {
  router.push(`/activity/detail/${id}`);
};
</script>

<style lang="scss" scoped>
.participated-activities {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  box-sizing: border-box;
}

.custom-nav {
  background-color: #fff;

  :deep(.van-nav-bar__title) {
    color: #333;
    font-weight: 600;
    font-size: 17px;
  }

  :deep(.van-icon) {
    color: #333;
  }
}

.content {
  height: calc(100vh - 46px);
  overflow: hidden;

  :deep(.van-tabs) {
    height: 100%;

    .van-tabs__wrap {
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .van-tabs__content {
      height: calc(100% - 44px);
      overflow: visible;
    }

    .van-tab {
      font-size: 15px;

      &--active {
        font-weight: 600;
      }
    }
  }
}

.tab-content {
  padding: 16px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

:deep(.van-pull-refresh) {
  min-height: calc(100vh - 46px - 44px - 32px);
}

:deep(.van-empty) {
  padding: 80px 0;
}
</style>

